<template>
  <div class="zong">
  	 <div class="currentContent">
  	 	  <p>当前定位城市</p>
  	 	  <div class="currentPos" :class="{'initial':!currentCity,'chooseState':currentCity}" @click="chooseCity('currentCity')"> <icon iconName="#icon-location"></icon>{{city}}</div>
  	 </div>
  	 <div>
  	 	  <p>开通服务城市</p>
  	 	  <div>
  	 	  	<ul>
  	 	  		<li :class="{'initial':!item.checked,'chooseState':item.checked}" v-for='(item,index) in cityArr' @click="chooseCity(item,index)">{{item.name}}</li>
  	 	  	</ul>
  	 	  </div>
  	 </div>
	</div>
</template>

<script>
  import {Storage} from "src/utils/storage.js";

  export default {
  	data(){
  		return{
  			cityArr:[
  				{name: '上海', checked: false},
  				{name: '北京', checked: false},
  				{name: '广州', checked: false},
  				{name: '杭州', checked: false},
  				{name: '福州', checked: false},
  				{name: '烟台', checked: false},
  				{name: '合肥', checked: false},
  				{name: '桂林', checked: false},
  				{name: '厦门', checked: false},
  				{name: '焦作', checked: false},
  				{name: '南京', checked: false},
  				{name: '深圳', checked: false},
  				{name: '汕头', checked: false},
  				{name: '龙岩', checked: false},			
  			],
  			city:Storage.get('city', true)?Storage.get('city', true):'上海',
  			currentCity:false//是否选择当前城市
  		}
  	},
  	methods:{
  		chooseCity(city,index){
  			let me=this
  			if(city=='currentCity'){
  				me.currentCity=true
  				setTimeout(()=>{
           me.$router.push({path:'/home'})
  			},100)
  				return
  			}else{
  					me.cityArr.forEach(item => {
            item.checked = false
         });
          let value = me.cityArr[index].checked;
            me.cityArr[index].checked = !value
           
  			setTimeout(()=>{
           Storage.set("city", me.cityArr[index].name, true);
           me.$router.push({path:'/home'})
  			},100)
  			} 
  		}
  	},
  }
</script>
<style scoped="" scss>
   .zong{
   	height: 100%;
   	padding: 2rem 0 0 1rem;
   }
   p{
   	color: #999;
   	font-size: .9rem;
   }
   .currentPos{
   	width: 30%;
   	height: 2.7rem;
   	line-height:2.7rem;
   	text-align: center;
   	border-radius: .3rem;
   	margin: 1rem 0;
   }
   /*默认样式*/
   .initial{
   	background: #ffffff;
   	color: #666;
   }
   .chooseState{
   	background: #ed4e8a;
   	color: #FFFFFF;
   }
   ul li{
   	float: left;
   	margin: 3% 3%  0 0;
   	width:30%;
   	height: 2.7rem;
   	line-height: 2.7rem;
   	text-align: center;
   	border-radius: .3rem;
   }
</style>
